<template>
  <div v-loading="vabtreeLoading" class="vabtree">
    <el-button-group style="min-width: 209px; margin-bottom: 10px">
      <!-- <el-button type="primary">折叠</el-button>
            <el-button type="primary">展开</el-button> -->
      <el-button :icon="Refresh" type="primary" @click="handleRefresh"> 刷 新 </el-button>
      <el-button type="primary" @click="expandTree">{{ expandText }}</el-button>
      <el-button v-show="showbtns" type="primary" @click="showDisabled"> 显示停用 </el-button>
    </el-button-group>
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" style="width: 100%" />
    <div class="down-tree" :style="{ height: treeHeight }">
      <el-tree
        ref="selectTree"
        class="filter-tree"
        :data="menudatalist"
        default-expand-all
        :default-expanded-keys="menudatalist"
        :filter-node-method="filterNode"
        :indent="treeIndent"
        node-key="id"
        :props="defaultProps"
        :render-content="renderContent"
        @node-click="handleNodeClick"
      >
        <template #default="{ node }">
          <element-tree-line :indent="treeIndent" :node="node" :show-label-line="true">
            <template #node-label>
              <span style="font-size: 12px">
                {{ node.label }}
              </span>
            </template>
          </element-tree-line>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { Refresh } from "@element-plus/icons-vue";
import { getElementLabelLine } from "element-tree-line";
import "element-tree-line/dist/style.css";
import { queryTree } from "@/api/mains";

export default defineComponent({
  name: "VabTree",
  components: { ElementTreeLine: getElementLabelLine(h) },
  props: {
    url: {
      type: String,
      default: () => {}
    },
    showbtns: {
      type: Boolean,
      default: () => {}
    },
    webmenu: {
      type: String,
      default: () => {}
    },
    treeHeight: {
      type: String,
      default: ""
    }
  },
  emits: ["treeId"],
  setup(props, { emit }) {
    const state = reactive({
      vabtreeLoading: false,
      treeIndent: 15,
      selectTree: null,
      renderContent: null,
      filterText: "",
      url: props.url,
      menudatalist: [],
      res: [],
      showbtns: true,
      defaultProps: {
        children: "children",
        label: "label"
      },
      queryForm: {},
      id: "", //查看详情id
      expandText: "全部收起",
      expandBoolean: "全部收起",
      childRef: null,
      treeHeight: props.treeHeight
    });
    const expandTree = () => {
      state.expandBoolean = !state.expandBoolean;
      state.expandText = state.expandBoolean ? "全部收起" : "全部展开";
      const nodes = state["selectTree"].store.nodesMap;
      for (const i in nodes) {
        nodes[i].expanded = state.expandBoolean;
      }
    };

    const filterNode = (value, data) => {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    };

    const handleCheckChange = (data, checked, indeterminate) => {
      console.log(data, checked, indeterminate);
    };
    const fetchData = async () => {
      if (props.url == "menu") {
        if (props.webmenu == "true") {
          state.vabtreeLoading = true;
          state.res = await queryTree(state.url, state.queryForm);
          state.vabtreeLoading = false;
        } else {
          state.vabtreeLoading = true;
          state.queryForm.mode = "all";
          state.res = await queryTree(state.url, state.queryForm);
          state.vabtreeLoading = false;
        }
      } else {
        state.vabtreeLoading = true;
        state.res = await queryTree(state.url);
        state.vabtreeLoading = false;
      }

      state.menudatalist = state.res.data;
      emit("treeId", state.res.data[0].id);
    };
    const handleRefresh = () => {
      if (props.url == "menu") {
        state.queryForm.ss = "1";
      }
      fetchData();
    };

    //节点点击事件
    const handleNodeClick = async row => {
      emit("treeId", row.id);
    };

    //显示停用
    const showDisabled = async () => {
      state.queryForm.ss = 0;
      await fetchData();
      state.renderContent = (h, { node, data }) => {
        if (data.disabled == true) {
          return <span style="color:#ABB2B2">{node.label}</span>;
        } else {
          return <span>{node.label}</span>;
        }
      };
    };

    onBeforeMount(() => {
      fetchData();
      state.showbtns = props.showbtns;
    });

    const clearClick = () => {
      handleRefresh();
    };

    watch(
      () => state.filterText,
      val => {
        state["selectTree"].filter(val);
      }
    );

    return {
      ...toRefs(state),
      filterNode,
      handleCheckChange,
      handleNodeClick,
      handleRefresh,
      Refresh,
      showDisabled,
      expandTree,
      clearClick
    };
  }
});
</script>
<style lang="scss" scoped>
.vabtree {
  height: 100%;
}
.down-tree {
  width: 100%;
  overflow: auto;
}
.el-tree {
  width: max-content;
}
.el-button-group {
  display: flex;
  .el-button {
    flex: auto;
    padding: 8px 11.9px;
  }
}
:deep() {
  .el-tree-node__content {
    height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 30px;
  }
  // .el-tree-node__label {
  //   margin-left: 5px !important;
  // }
  // .el-tree-node__children {
  //   padding-left: 15px;
  // }
  // .el-tree-node__children .el-tree-node__expand-icon {
  //   margin-right: 4px;
  //   // margin-left: 10px;
  // }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #fff !important;
  }
  .el-tree .el-icon svg {
    //原有的箭头 去掉
    display: none !important;
    width: 0;
    height: 0;
  }
  .el-tree-node__expand-icon {
    //引入的图标（图片）size大小 => 树节点前的预留空间大小
    font-size: 16px;
  }

  //图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0
  .el-tree .el-tree-node__expand-icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-tree .el-tree-node__expand-icon:before {
    // 未展开的节点
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: url("@/assets/close.png") no-repeat;
    background-size: 100% 90%;
  }

  .el-tree .el-tree-node__expand-icon.expanded:before {
    //展开的节点
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: url("@/assets/open.png") no-repeat;
    background-size: 100% 90%;
  }

  .el-tree .is-leaf.el-tree-node__expand-icon::before {
    //叶子节点（不显示图标）
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: none !important;
  }
  .el-tree__empty-text {
    white-space: nowrap;
    transform: translate(140%, -50%);
  }
  .el-tree-node__content:hover {
    color: #1890ff;
    background: none;
  }
  .is-current > .el-tree-node__content > .el-tree-node__label {
    color: #1890ff;
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #fff !important;
  }
}
</style>
